<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Форматировать SQL</title>
    <link rel="stylesheet" type="text/css" href="../lib/codemirror/theme/material.css">
    <link rel="stylesheet" type="text/css" href="../lib/codemirror/theme/erlang-dark.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../lib/codemirror/lib/codemirror.css">
    <link rel="stylesheet" type="text/css" href="../lib/codemirror/addon/dialog.css">
    <link rel="stylesheet" type="text/css" href="../css/codeMirror.css">
    <script type="text/javascript" src="../lib/codemirror/lib/codemirror.js"></script>
    <script type="text/javascript" src="../lib/codemirror/mode/sql/sql.js"></script>
    <script type="text/javascript" src="../lib/codemirror/addon/dialog.js"></script>
    <script type="text/javascript" src="../lib/codemirror/addon/search.js"></script>
    <script type="text/javascript" src="../lib/codemirror/addon/searchcursor.js"></script>
    <script type="text/javascript" src="../lib/codemirror/addon/jump-to-line.js"></script>
    <script src="../lib/jquery/jquery.js"></script>
    <script src="../lib/jquery/jquery.cookie.js"></script>
    <script src="../lib/jsbeautify/beautify.js"></script>
    <script src="../lib/jsbeautify/beautify-css.js"></script>
    <script src="../lib/jsbeautify/beautify-html.js"></script>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>Форматировать SQL
            <div class="layui-input-inline" style="text-align: right;">
                <select name="select_theme" id="select_theme">
                    <option selected>default</option>
                    <option>erlang-dark</option>
                    <option>material</option>
                </select>
            </div>
        </legend>
    </fieldset>
    <form class="layui-form " action="">
        <input type="hidden" name="hidden_syntax" id="hidden_syntax" value="text/x-mysql">
         <div style="display: none;" name="hidden_default_text" id="hidden_default_text">SELECT T.USERNAME, T.AGE, T.SEX FROM USER</div>
        <div class="layui-form-item layui-form-text">
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <div style="line-height: 0">
                        <textarea id="source" style="height:280px;" rows="20" cols="160"></textarea>
                        <center>
                            <button id="btn_format_sql" class="layui-btn" type="button" data-func="sqlFormatter.format" lay-submit="" lay-filter="btn_submit">
                                <strong>Усовершенствовать SQL</strong> <em>(ctrl-enter)</em>
                            </button>
                            <button class="layui-btn " type="button" id="btn_compress">
                                <strong>Минифицировать SQL</strong>
                            </button>
                        </center>
                    </div>
                    <textarea id="origin_content" name="origin_content" style="display: none;"></textarea>
                </div>
            </div>
        </div>
    </form>
    <script src="../layui/layui.js"></script>
    <script type="text/javascript" src="../renderer-process/popup.js"></script>
    <script type="text/javascript" src="../renderer-process/extentFunction.js"></script>
    <script type="text/javascript" src="../renderer-process/codemirror-init.js"></script>
    <script type="text/javascript">
        /**
         * 处理请求模块
         */

        layui.use(['form', 'layer'], function() {
            var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
            var $ = layui.jquery;
            form.render(); // 渲染 form 表单


            // 绑定checkbok 为单选功能以及修改对应功能按钮的执行方法
            form.on('checkbox(chk_condition)', function(data) {
                console.log(data.elem); //得到checkbox原始DOM对象
                console.log(data.elem.checked); //是否被选中，true或者false
                console.log(data.value); //复选框value值，也可以通过data.elem.value得到
                console.log(data.othis); //得到美化后的DOM对象

                var name = $(data.elem).attr('name');
                console.log(name)

                if (data.elem.checked) {
                    var arr = $('input[name="' + name + '"]');
                    $.each(arr, function(index, val) {
                        $(val).prop('checked', false)
                        $(val).removeProp('checked')
                        $(val).removeAttr('checked')
                    });

                }
                $(data.elem).attr('checked', 'checked');
                $(data.elem).attr('checked', true);
                $(data.elem).prop('checked', true);


                var args = $(data.elem).data('obj')
                console.log('args:' + args)
                $.each(args, function(index, val) {
                    console.log(val.input_id + ":" + val.func_name)
                    var inputObj = $('#' + val.input_id);
                    console.log('对象:' + inputObj)
                    $('#' + val.input_id).attr('data-func', val.func_name);
                    $('#' + val.input_id).prop('data-func', val.func_name);
                });

                form.render(); // 重新渲染 form 表单
            });

            // 监听 form 表单提交
            form.on('submit(btn_submit)', function(event) {
                console.log('func:' + $(this).attr("data-func"));
                if (typeof($(this).attr("data-func")) == "undefined") {
                    pop_alert('This button is unbound event!');
                    return;
                }

                var index; // 用于关闭弹出层
                var reqData = $('.layui-form').serializeArray();
                reqData.push({
                    "name": "func",
                    "value": $(this).attr("data-func")
                });
                $.ajax({
                    data: reqData,
                    url: 'http://127.0.0.1:38664/process_get',
                    dataType: 'json',
                    cache: false,
                    async: true,
                    timeout: 5000,
                    beforeSend: function() {
                        index = layer.load(2);
                    },
                    complete: function() {
                        layer.close(index);
                    },
                    success: function(data) {
                        console.log(data)
                        the.editor.setValue(data.result_content);

                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        pop_ajaxError(jqXHR, textStatus, errorThrown);
                    }
                });

            });



        });
    </script>
    <script>
        window.onresize = function () {
            resizeContentSize()
        } // 页面初始化就调整高度
        window.onload = function () {
            resizeContentSize()
        }

        function resizeContentSize() {
            var _TextareaArr = document.getElementsByClassName("CodeMirror");
            var tempTextarea = _TextareaArr[0];
            var areaHeight = tempTextarea.offsetHeight;
            var bodyHeight = document.body.clientHeight;
            var per = areaHeight / bodyHeight; // 窗口大小事件监控
            var currBoxHeight = document.documentElement.clientHeight;
            //获取当前容器的高度
            temp_box_height = currBoxHeight;
            for (let index = 0; index < _TextareaArr.length; index++) {
                const element = _TextareaArr[index];
                element.style.height = (currBoxHeight *
                    per) - 10 + 'px';
            }
        }
    </script>
</body>

</html>